import { ListPage } from "custom/index";
import { getCustomerSubAccountPage } from './api'
import LinkColumn from '@/components/table-column/LinkColumn.vue'
import { searchStatusOption } from './constant'
import dayjs from "dayjs";

const level1 = ['_index', 'customerName']
const level2 = ['platformName', 'shopName', 'shopGroup', 'shopTypeName', 'serviceShiftName', 'customTypeName', 'consultPeopleNum', 'conversionRate', 'responseSecond']
const level3 = ['accountName']
const spanMethod = ({ row, column }) => {
  if (level1.includes(column.property)) {
    return {
      rowspan: row.rowspan1,
      colspan: row.colspan1
    }
  } else if (level2.includes(column.property)) {
    return {
      rowspan: row.rowspan2,
      colspan: row.colspan2
    }
  } else if (level3.includes(column.property)) {
    return {
      rowspan: row.rowspan3,
      colspan: row.colspan3
    }
  }
}

const page = new ListPage('SubAccountDistributionChild');

page
  .api(getCustomerSubAccountPage)
  .useSearch()
    .addInputItem('keyword', '子账号名称/ 客户名称/店铺名称')
    .addDictSelect({ prop: 'companyNo', label: '子账号分配子公司' }, 'company')
    .addItem({ prop: 'customerName', label: '客户名称' })
    .addItem({ prop: 'accountName', label: '子账号名称' }) 
    .addItem({ prop: 'shopName', label: '店铺名称' })
    .addItem({ prop: 'name', label: '客服姓名' })
    .addItem({ prop: 'flowerName', label: '客服花名' })
    .addItem({ prop: 'no', label: '客服工号' })
    .addItem({ prop: 'mobile', label: '客服手机号' })
    .addItem({ prop: 'groupNo', label: '客服编队' })
    .useDatePicker({ prop: 'endDateS', label: '结束日期晚于' }).disabled(props => {
      return props.data.searchStatus === '1'
    }).upto('PageSearch')
    .addSelect({prop: 'searchStatus', label: '分配记录', default: '1', clearable: false, onChange: () => {
      const search = page.get('PageSearch')
      const searchRef: any = search.instance.$refs.custom
      const query = searchRef.query
      if (query.searchStatus === '2') {
        query.endDateS = dayjs().subtract(60, 'day').format('YYYY-MM-DD')
      } else {
        query.endDateS = ''
      }
      page.dispatch('ListPage', 'getData')
    }}, searchStatusOption)
    .end()
  .useTable()
    .setProp('class', 'deep-border')
    .setProp('spanMethod', spanMethod)
    .useColumn({ prop: '_index', label: '#', align: 'center', width: 50, fixed: 'left' }).end()
    .useColumn('customerName').label('客户名称').minWidth(120).end()
    .useColumn('platformName').label('平台').end()
    .useCustomColumn(LinkColumn, { prop: 'shopName', linkProp: 'shopLinkUrl', linkType: 'link' }).label('店铺名称').minWidth(140).sortable().end()
    .useColumn('shopGroup').label('店铺分组').minWidth(140).end()
    .useColumn('shopTypeName').label('店铺类目').minWidth(140).end()
    .useColumn('serviceShiftName').label('班次').minWidth(160).end()
    .useColumn('customTypeName').label('客服类型').minWidth(140).end() 
    .useColumn('consultPeopleNum').label('约定咨询量').minWidth(160).end()
    .useColumn('conversionRate').label('约定转化率').minWidth(160).end()
    .useColumn('responseSecond').label('约定响应时间').minWidth(160).end()

    .useColumn('accountName').label('子账号名称').minWidth(160).end()
    .useColumn('conventionSalary').label('分摊底薪').minWidth(160).end()

    // .useColumn('companyBaseSalary').label('子账号分配').minWidth(160).end()
    // .useColumn('conventionSalary').label('子账号分配子公司').minWidth(160).end()
    .useColumn('companyName').label('子账号分配子公司').minWidth(160).end()

    .useColumn('commissionRatio').label('提成比例').percent().minWidth(160).end()
    .useColumn('name').label('客服姓名').minWidth(160).end()
    .useColumn('flowerName').label('客服花名').minWidth(160).end()
    // .useColumn('exNameLabel').label('分部客服').minWidth(160).end()
    // .useColumn('customPostTypeName').label('岗位类别').minWidth(160).end()
    .useColumn('startDate').label('开始日期').minWidth(160).end()
    .useColumn('endDate').label('结束日期').minWidth(160).end()
    // .useColumn('createTime').label('创建时间').minWidth(180).sortable().end()
    .useColumn('createUserName').label('分配人').minWidth(140).sortable().end()
    .end()
  .usePagination()
    .end()

export default page
